import React, { Component } from 'react';
import { Card ,Button } from 'antd';
import { connect } from 'dva';

const namespace = 'puzzlecards';

const mapStateToProps = (state) => {
  const cardList = state[namespace].data;
  return {
    cardList,
  };
};

//定义了一个 click 事件的回调函数，而下面是直接调用函数
//onClickAdd 函数中调用 dispatch 派发了一个 action
  //action 包含 onClickAdd 传递过来的内容 { setup, punchline } 作为 payload
  //action 的 type 是 puzzlecards/addNewCard ，addNewCard 在这个例子中是 reducer 的名字
//dispatch 函数就是和 dva model 打交道的唯一途径
  //action，唯一强制要包含的是 type 字段，string 类型，用来告诉 dva 我们想要干什么
  //约定用 payload字段表示额外信息
const mapDispatchToProps = (dispatch) => {
  return {
    onClickAdd: (newCard) => {
      const action = {
        type: `${namespace}/addNewCard`,
        payload: newCard,
      };
      dispatch(action);
    },
    onDidMount: () => {
      dispatch({
        type: `${namespace}/queryInitCards`,
      });
    },
  };
};


//连接 dva 和 React
//组件获取了：1.让组件获取 model 中的数据 2.驱动 model 改变的方法
//dva 框架会适时调用 mapStateToProps，并传入 dva model state 作为入参，最后全部并入组件的 props 里
//mapDispatchToProps 对象上的函数会被 dva 并入 props，注入给组件使用
@connect(mapStateToProps, mapDispatchToProps)
class PuzzleCardsPage extends Component {
  componentDidMount() {
    this.props.onDidMount();
  }
  render() {
    return (
      <div>
        {
          this.props.cardList.map(card => {
            return (
              <Card key={card.id}>
                <div>Q: {card.setup}</div>
                <div>
                  <strong>A: {card.punchline}</strong>
                </div>
              </Card>
            );
          })
        }
        <div>
          <Button onClick={() => this.props.onClickAdd({
            setup: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
            punchline: 'here we use dva',
          })}> 添加卡片 </Button>
        </div>
      </div>
    );
  }
}

export default PuzzleCardsPage;
